<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <image
        style="width: 130rpx; height: 130rpx"
        :src="globalConfig.appInfo.logo"
        mode="widthFix"
      ></image>
      <text class="title">智慧养老</text>
    </view>
    <view class="login-form-content">
      <view class="action-btn">
        <button @click="handleLogin" class="login-btn cu-btn block lg round">
          手机号快捷登录
        </button>
      </view>
    </view>

    <view class="xieyi flex text-center justify-center">
      <u-checkbox-group v-model="isRead">
        <u-checkbox
          name="1"
          size="32"
          iconSize="32"
          labelSize="28"
          activeColor="#faab40"
          shape="circle"
          label="我已阅读并同意"
        ></u-checkbox>
      </u-checkbox-group>
      <!-- <text class="text-grey1">我已阅读并同意</text> -->
      <text @click="to(0)" class="text-blue">《用户协议》</text>
      <text>和</text>
      <text @click="to(1)" class="text-blue">《隐私协议》</text>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { Sm4encrypt } from '@/utils/encryption.js'
export default {
  name: 'Login',
  data() {
    return {
      isRead: [],
      globalConfig: getApp().globalData.config,
      loginForm: {
        username:'xiong',
        password: Sm4encrypt('auJ8535#')
      }
    }
  },
  methods: {
    // 隐私协议 用户协议
    to(val) {
      let site = this.globalConfig.appInfo.agreements[val]
      this.$tab.navigateTo(`${site.url}?title=${site.title}`)
    },
    handleLogin(){
      console.log(this.isRead);
      if(this.isRead && this.isRead.length > 0) {
        this.pwdLogin()
      } else {
        this.$refs.uToast.show({
          type: 'default',
						title: '提示',
						message: "请阅读并同意用户协议、隐私协议"
        })
      }
    },
    async pwdLogin() {
      this.$modal.loading('登录中，请耐心等待...')
      // 执行登录
      this.$store
        .dispatch('Login', this.loginForm)
        .then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
        })
        .catch(err => [this.$modal.closeLoading()])
    },
    // 登录成功后，处理函数
    loginSuccess(result) {
      // 设置用户信息
      this.$store.dispatch('GetInfo').then(res => {
        this.$tab.reLaunch('/pages/index')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.normal-login-container {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  .logo-content {
    width: 100%;
    font-size: 21px;
    flex-wrap: wrap;
    padding-top: 15%;

    image {
      border-radius: 4px;
    }

    .title {
      width: 100%;
      font-size: 16px;
      margin-top: 20px;
      text-align: center;
    }
  }

  .login-form-content {
    text-align: center;
    margin: 20px auto;
    margin-top: 15%;
    width: 80%;

    .input-item {
      margin: 20px auto;
      background-color: #f5f6f7;
      height: 45px;
      border-radius: 20px;

      .icon {
        font-size: 38rpx;
        margin-left: 10px;
        color: #999;
      }

      .input {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        text-align: left;
        padding-left: 15px;
      }
    }

    .login-btn {
      margin-top: 10px;
      height: 45px;
      color: #fff;
      background: #faab40;
    }

    .xieyi {
      color: #333;
      margin-top: 20px;
    }
  }
}
// ::v-deep .u-radio-group {
//   flex: 0 !important;
// }
</style>
